<template>
  <div class="storage_apply">
    <el-dialog
      title="物料入库申请"
      width="60%"
      top="10%"
      :visible.sync="dialogTableVisible"
      v-dialogDrag
      :close-on-click-modal="false"
      customClass="mes_dialog"
      @closed="closedDialog">
      <div class="dialog_header">
        <code-scan
          v-if="dialogTableVisible"
          code-placeholder="[周转码]"
          @codeSubmit="handleCodeScan"
          ref="codeScan">
        </code-scan>
      </div>
      <div class="tables_panel" v-if="pageIndex === 2">
        <div class="table_panel table_container">
          <el-table
            :data="listData"
            height="320"
            border
            style="width: 100%"
            class="table_dialog"
            v-loading="isLoading2">
            <el-table-column
              prop="materialNumber"
              label="物料编码"
              align="center"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="materialName"
              label="物料名称"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="drawingNumber"
              label="图号"
              align="center"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="turnoverNumber"
              label="周转码"
              min-width="240"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="unit"
              label="单位"
              class="data_td"
              align="center"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              align="center"
              prop="materialSerialNumber"
              label="序列号"
              :class-name="'cell_padding'">
            </el-table-column>
            <el-table-column
              prop="quantity"
              label="入库数量"
              class="data_td"
              :class-name="'cell_padding'">
              <template slot-scope="scope">
                <el-input-number
                  v-model.number="scope.row.quantity"
                  :controls="false"
                  :min="0"
                  :precision="0">
                </el-input-number>
              </template>
            </el-table-column>
            <el-table-column
              :class-name="'btn_col'"
              :resizable="false"
              width="90"
              label="操作"
              align="center">
              <template slot-scope="scope">
                <span class="jump_item" @click="deleteItem(scope.row)">删除</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="empty_page" v-if="pageIndex === 1">
        <div>
          <img src="@/assets/img/scan.png" draggable="false">
          <p>请扫码添加物料入库</p>
        </div>
      </div>
      <span slot="footer" class="dialog-footer mes_btn">
          <el-button type="primary" @click="saveData" :disabled="pageIndex === 1">
            提交
          </el-button>
          <el-button @click="dialogTableVisible = false">
            取消
          </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'StorageApply',
  data() {
    return {
      dialogTableVisible: false,
      pageIndex: 1, // 内容模块序号
      isLoading2: false, // 表格加载
      saveState: true, // 保存按钮状态
      listData: [], // 申请表格
    }
  },
  computed: {
    // 申请状态字典
    storeApplyStatus() {
      return this.$store.state.dict.storeApplyStatus.labels || []
    },
    // 物料“未申请”状态
    tobeApplied() {
      let item = this.storeApplyStatus.find((item) => item.value === 'TobeApplied') || {id: ''}
      return item.id
    },
  },
  methods: {
    // 开启弹窗
    openDialog() {
      this.dialogTableVisible = true
    },
    // 扫码操作
    handleCodeScan(value) {
      if (value) {
        this.pageIndex = 2
        this.getNumberId(value)
      }
    },
    // 退库扫码查询编码ID
    getNumberId(number) {
      let postData = {
        turnoverNumber: number
      }
      this.$store.dispatch('saveData', {
        method: 'post',
        url: 'a/materialstoreinventory/materialStoreInventory/selectByNumber2',
        data: postData,
        noCommit: true
      }).then((res) => {
        if (res.data.length) {
          this.getApplyList(res.data[0].id)
        } else {
          this.tipMessage('error', '扫码搜索结果为空，请核实扫码数据')
        }
      }).catch(() => {
        this.tipMessage('error', '扫码搜索失败，请核实扫码数据')
      })
    },
    // 获取申请表格
    getApplyList(id) {
      let postData = {
        pageNo: 1,
        pageSize: 2000,
        query: {
          id: id,
          applyStatusId: this.tobeApplied
        }
        /*query: {
          applyStatusId: this.tobeApplied,
          turnoverId: ids
        }*/
      }
      this.isLoading2 = true
      this.$store.dispatch('saveData', {
        method: 'post',
        url: 'a/materialstoreinventory/materialStoreInventory/list',
        data: postData,
        noCommit: true
      }).then((res) => {
        let list = res.data.list || []
        this.collectListData(list)
      }).catch(() => {
        this.tipMessage('error', '入库列表获取失败，请重新尝试')
      }).finally(() => {
        this.isLoading2 = false
      })
    },
    /**
     * 收集请求表格数据列表
     * @param list 请求列表数据
     */
    collectListData(list) {
      list.forEach((item) => {
        if (!this.listData.some((row) => row.id === item.id)) {
          this.listData.push(item)
        } else {
          this.tipMessage('error', '入库物料已添加')
        }
      })
    },
    // 删除一条数据
    deleteItem(row) {
      this.confirmDelete().then(() => {
        this.listData.forEach((item, index) => {
          if (item.id === row.id) {
            this.listData.splice(index, 1)
          }
        })
      })
    },
    // 提交申请
    saveData() {
      let postData = this.listData.filter((item) => item.quantity)
      if (!postData.length) {
        return this.tipMessage('error', '请填写入库数量')
      }
      if (this.saveState) {
        this.saveState = false
        this.$store.dispatch('saveData', {
          method: 'post',
          url: 'a/materialstoreinventory/materialStoreInventory/submitStoreApply',
          data: postData,
          noCommit: true
        }).then(() => {
          this.dialogTableVisible = false
          this.tipMessage('success', '申请成功')
          this.$emit('submitSuccess')
        }).catch(() => {
          this.saveState = true
        })
      }
    },
    // 弹窗关闭回调
    closedDialog() {
      this.listData = []
      this.pageIndex = 1
      this.saveState = true
    },
    /**
     * 提示
     * @param type 提示类型
     * @param str 提示内容
     */
    tipMessage(type, str) {
      this.$message({
        type: type,
        message: str,
        duration: 1500,
        center: true
      })
    }
  }
}
</script>

<style lang="less">
  .storage_apply {
    .dialog_header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .el-select.number_select {
        min-width: 600px;
        .el-input__inner {
          line-height: 30px !important;
        }
      }
    }
    .tables_panel{
      margin-top: 18px;
      .table_panel {
        min-height: 200px;
        max-height: 440px;
      }
    }
    .el-table__body tr td {
      .cell {
        background-color: #f4f7fa !important;
        height: 40px;
        padding-right: 1px !important;
        .el-input__inner {
          position: absolute;
          top: 0;
          left: 0;
          box-sizing: border-box;
          background-color: #fff !important;
          text-align: center;
          &:focus {
            border: @mesTableInputFBorder;
          }
        }
      }
    }
    .el-table__body {
      .btn_col .cell {
        background-color: #fff !important;
      }
    }
    .empty_page {
      width: 100%;
      height: 320px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #a1b1c1;
      div {
        width: 160px;
        margin-top: -42px;
      }
      img {
        width: 116px;
        user-select: none;
      }
    }
  }
</style>
